import React, { useRef } from 'react';
import Navbar from "../../components/navbar/navbar"
import "./home.css";
import { Swiper } from 'antd-mobile'
import { getHome } from "../../api/home"
import { Link, useNavigate } from "react-router-dom"


// 函数组件
function Home() {
  // 分类列表
  let [classList, setClassList] = React.useState(null);

  // 今日新品
  let [newList, setNewList] = React.useState(null);

  // 吃货种草机
  let [earList, setEatList] = React.useState(null);
  let [earLists, setEatLists] = React.useState(null);

  // 美食研究所
  let [userList, setUserList] = React.useState(null);

  // 活动
  let [taskList, setTaskList] = React.useState(null);

  // 为你甄选
  let [newearList, setNewearList] = React.useState(null);

  // 美食新秀
  let [showList, setShowList] = React.useState(null);

  // 热门专题
  let [hotList, setHotList] = React.useState(null);

  let navigate = useNavigate();//链接跳转

  const goClass = (id) => {
    console.log(id);
    if (id == 23) {
      navigate('/homenew')

    } else if (id == 24) {
      navigate('/homesort')

    } else if (id == 25) {
      navigate('/morevideo')

    } else if (id == 26) {
      navigate('/morescene')

    } else if (id == 27) {
      navigate('/morecollocation')
    }
  }
  const pageView = useRef(null);

  //   请求数据
  React.useEffect(() => {
    if (!JSON.parse(localStorage.getItem("collect")) && !JSON.parse(localStorage.getItem("dist")) && !JSON.parse(localStorage.getItem("class"))){
      localStorage.setItem("collect", JSON.stringify([]))

      localStorage.setItem("dist", JSON.stringify([]))

      localStorage.setItem("class",JSON.stringify([]))

    }


    pageView.current.scrollTop = 0;

    getHome().then(data => {
      console.log(data.data.module_list[3].module_data[0].link_url.slice(12, 15));
      console.log(data.data);
      let list = data.data.module_list
      setClassList(list[1].module_data)
      setNewList(list[2].module_data)
      setEatList(list[3].module_data.slice(0, 2))
      setEatLists(list[3].module_data.slice(2, 6))
      setUserList(list[4].module_data)
      setTaskList(list[6].module_data)
      setNewearList(list[7].module_data)
      setShowList(list[8].module_data)
      setHotList(list[9].module_data)

    })
  }, [])
  return (
    <div className='home' ref={pageView} style={{ height: '100vh', overflow: "scroll" }}>
      <div className='container'>
        {/* 顶部 */}
        <div className='top-nav'>
          <div className='nav-left'>
            <a href=''>
              <img src='http://pub.szzhangchu.com/web/v4.2/images/logo-white.png' />
            </a>
          </div>
          <div className='nav-search'>
            <div className='search-btn'>
              <Link to={'/searchcontent'}>
                <i className='iconfont icon-sousuo'></i>请输入菜名或者食材搜索
              </Link>

            </div>
          </div>
          <div className='nav-right'>
            <img src='../../assets/img/照相机.png' />
          </div>
        </div>
        {/* 轮播图 */}
        <div className='swiper'>
          <a href=''>
            <img src='http://img.szzhangchu.com/1635388490535_9048487454.jpg@640w_280h_1e_1c.jpg' />
          </a>
        </div>
        {/* 视频跳转 */}
        <div className='m-dntrance'>
          <div className='m-wandao'>
            <div className='left'>

              <Link to={"/homesort"} href=''>
                <div className='ctn'>
                  <h2>2万道</h2>
                  <p>原创美食教学视频</p>
                </div>
                <img src='http://pub.szzhangchu.com/web/v4.2/images/newhome/wandao1.png' />
              </Link>

            </div>
            <div className='right'>
              <Link to={"/morevideo"} href=''>
                <div className='ctn'>
                  <h2>1万道</h2>
                  <p>精美优质IP视频</p>
                </div>
                <img src='http://pub.szzhangchu.com/web/v4.2/images/newhome/wandao2.png' />
              </Link>
            </div>
          </div>
        </div>
        {/* 分类 */}
        <div className='m-dntrance-list'>
          {
            classList && classList.map(item => {
              return (
                <div className='u-item' key={item.id}>
                  <div className='icon-item' onClick={goClass.bind(this, item.id)}>
                    {
                      item.id == 24 ? (<i className='icon'></i>
                      ) : ("")
                    }
                    <img src={item.entry_icon} />
                    <p>{item.entry_title}</p>
                  </div>
                </div>
              )
            })


          }

        </div>
        {/* 列表 */}
        <div className='m-module'>
          <div className='m-heading'>
            <h2>今日新品</h2>
            <span><Link to={'/detailsscene/' + 51}>更多新品<i className='iconfont icon-youbian'></i></Link></span>
          </div>
          <div className='m-newproducts-ctn'>
            <ul>
              {
                newList && newList.map(item => {
                  return (
                    <li key={item.dishes_id}>
                      <Link to={"/detailsvideo/" + item.dishes_id}>
                        <div className='u-img'>
                          <img src={item.dishes_image} className={`${item.dishes_id == "15514" ? 'width' : ''}`} />
                          <i className='icon'></i>

                        </div>
                        <div className='u-info'>
                          <h2>{item.dishes_name}</h2>
                          <p>{item.dishes_desc}</p>
                        </div>
                      </Link>

                    </li>
                  )
                })
              }


            </ul>

          </div>
        </div>

        <div className='m-module'>
          <div className='m-heading'>
            <h2>吃货种草机</h2>
            <span><Link to={'/morescene'}>更多种草场景<i className='iconfont icon-youbian'></i></Link></span>
          </div>
          <div className='m-newproducts-ctn'>
            <ul>
              {
                earList && earList.map(item => {
                  return (
                    <Link to={"/detailsscene/" + item.link_url.slice(12, 15)} key={item.link_url}>
                      <li>
                        <div className='u-img'>
                          <img src={item.img_url} />
                        </div>

                      </li>
                    </Link>

                  )
                })
              }

            </ul>
            <ul className='item'>
              {
                earLists && earLists.map(item => {
                  return (
                    <Link to={"/detailsscene/" + item.link_url.slice(12, 15)} key={item.link_url}>
                      <li>
                        <div className='u-img'>
                          <img src={item.img_url} />
                        </div>


                      </li>
                    </Link>


                  )
                })
              }

            </ul>
          </div>
        </div>

        <div className='m-module'>
          <div className='m-heading'>
            <h2>美食研究所</h2>

            <span><Link to={'/moreipvideo'}>更多创意美食<i className='iconfont icon-youbian'></i></Link></span>
          </div>
          <Swiper slideSize={100}
            indicator={() => null}
            defaultIndex={0}
            autoplay
            loop>
            <Swiper.Item>
              <div className='m-IP-ctn'>

                <div className='u-gallery'>
                  {
                    userList ? (<img src={userList[0].background} />) : ("")
                  }


                </div>
                <div className='m-IP-warp'>
                  <div className='m-headings'>
                    <h2>诚意美食推荐</h2>
                    <p>
                      <Link to={'/morevideo'}>
                        查看更多美食IP
                        <i className='iconfont icon-youbian'></i>
                      </Link>
                    </p>
                  </div>
                  <div className='swiper-container'>
                    <ul className='swiper-wrapper'>
                      {
                        userList && userList.slice(0, 3).map(item => {
                          return (
                            <Link to={'/detailscourse/' + item.series_id} key={item.series_id}>
                              <li >
                                <div className='m-slide-ctn'>
                                  <img src={item.series_image} />
                                  <h2>{item.series_name}</h2>
                                  <p>{item.description}</p>
                                </div>
                              </li>
                            </Link>
                          )

                        })

                      }
                    </ul>
                  </div>
                </div>
              </div>

            </Swiper.Item>
            <Swiper.Item>
              <div className='m-IP-ctn'>

                <div className='u-gallery'>
                  {
                    userList ? (<img src={userList[3].background} />) : ("")
                  }
                </div>
                <div className='m-IP-warp'>
                  <div className='m-headings'>
                    <h2>诚意美食推荐</h2>
                    <p>
                      <Link to={'/morevideo'}>
                        查看更多美食IP
                        <i className='iconfont icon-youbian'></i>
                      </Link>
                    </p>
                  </div>
                  <div className='swiper-container'>
                    <ul className='swiper-wrapper'>
                      {
                        userList && userList.slice(3, 6).map(item => {
                          return (
                            <Link to={'/detailscourse/' + item.series_id} key={item.series_id}>
                              <li >
                                <div className='m-slide-ctn'>
                                  <img src={item.series_image} />
                                  <h2>{item.series_name}</h2>
                                  <p>{item.description}</p>
                                </div>
                              </li>
                            </Link>
                          )

                        })

                      }
                    </ul>
                  </div>
                </div>
              </div>

            </Swiper.Item>
            <Swiper.Item>
              <div className='m-IP-ctn'>

                <div className='u-gallery'>
                  {
                    userList ? (<img src={userList[6].background} />) : ("")
                  }
                </div>
                <div className='m-IP-warp'>
                  <div className='m-headings'>
                    <h2>诚意美食推荐</h2>
                    <p>
                      <Link to={'/morevideo'}>
                        查看更多美食IP
                        <i className='iconfont icon-youbian'></i>
                      </Link>
                    </p>
                  </div>
                  <div className='swiper-container'>
                    <ul className='swiper-wrapper'>
                      {
                        userList && userList.slice(6, 9).map(item => {
                          return (
                            <Link to={'/detailscourse/' + item.series_id} key={item.series_id}>
                              <li >
                                <div className='m-slide-ctn'>
                                  <img src={item.series_image} />
                                  <h2>{item.series_name}</h2>
                                  <p>{item.description}</p>
                                </div>
                              </li>
                            </Link>
                          )

                        })

                      }
                    </ul>
                  </div>
                </div>
              </div>

            </Swiper.Item>
          </Swiper>

        </div>



        <div className='m-module'>
          <div className='m-heading'>
            <h2>活动专题</h2>
            <span><Link to={'/moretopic'}>更多专题<i className='iconfont icon-youbian'></i></Link></span>
          </div>
          <div className='m-topic-ctn'>
            <Swiper trackOffset={10}
              slideSize={94}
              style={{
                '--border-radius': '8px',
              }}
              indicator={() => null}
              defaultIndex={0}>
              {
                taskList && taskList.map(item => {
                  return (
                    <Swiper.Item key={item.topic_id}>
                      <Link to={"/detailstopic/" + item.topic_id}>
                        <img src={item.topic_picture} />

                      </Link>
                    </Swiper.Item>
                  )
                })
              }

            </Swiper>
          </div>

        </div>


        <div className='m-module'>
          <div className='m-heading'>
            <h2>为你甄选</h2>
            <span><Link to={'/morefood'}>更多精选美食<i className='iconfont icon-youbian'></i></Link></span>
          </div>
          <div className='m-choose-ctn'>
            <ul>
              {
                newearList && newearList.map(item => {
                  return (
                    <li key={item.dishes_id}>
                      <Link to={'/detailsvideo/' + item.dishes_id}>
                        <div className='u-img'>
                          <div className='u-gallery'>
                            <img src={item.dishes_image} />
                            <i className='icon'></i>
                          </div>
                        </div>
                        <div className='u-info'>
                          <h2>{item.dishes_name}</h2>
                          <p>{item.desc}</p>
                        </div>
                      </Link>
                    </li>
                  )
                })
              }
            </ul>
          </div>
        </div>

        {/* <div className='m-module'>
          <div className='m-heading'>
            <h2>美食新秀</h2>
            <span>美食轰趴馆<i className='iconfont icon-youbian'></i></span>
          </div>
          <div className='m-newproducts-ctn'>
            <ul className='u-bottom'>
              {
                showList && showList.map(item => {
                  return (
                    <li key={item.id}>
                      <a href=''>
                        <div className='u-img'>
                          <img src={item.image} />
                          <i className='icon'></i>

                        </div>
                        <div className='u-info'>
                          <h2>银耳白果无花果瘦肉汤</h2>
                          <div className='u-user'>
                            <img src={item.image} />
                            <span>{item.nick}</span>
                          </div>
                        </div>
                      </a>

                    </li>
                  )

                })
              }


            </ul>

          </div>
        </div> */}


        <div className='m-module'>
          <div className='m-heading'>
            <h2>热门专题</h2>
            <span><Link to={'/moreipvideo'}>更多<i className='iconfont icon-youbian'></i></Link></span>
          </div>
          <div className='m-newtopic-ctn'>
            <ul>
              {
                hotList && hotList.map(item => {
                  return (
                    <Link to={'/detailscourse/' + item.series_id} key={item.series_id}>
                      <li>
                        <div className='img'>
                          <img src={item.series_image} />
                          <span className='icons'>专辑</span>
                          <i className='icon'></i>
                          <span className='video-count'>{item.course_num}个视频</span>
                        </div>
                        <div className='text'>
                          <h2>{item.series_name}</h2>
                          <span>{item.series_title}</span>
                        </div>
                      </li>
                    </Link>
                  )
                })
              }

            </ul>
          </div>
        </div>
      </div>
      <div className='m-bottom'>
        <img src='http://pub.szzhangchu.com/web/v4.2/images/newhome/slogan.png' />
      </div>

      {/* 底部导航 */}
      <Navbar index="1" />
    </div>
  );

}


export default Home;
